<header class="navbar navbar-expand-lg navbar-dark fixed-top nga-navbar">
  <nav class="container" aria-label="Main navigation">
    <a routerLink="/" class="navbar-brand" [attr.alt]="'Home - ' + appInfo.name">
      <img 
        [src]="'./assets/params/images/logo/' + appInfo.logo + '-logo.png'"
        [srcset]="'./assets/params/images/logo/' + appInfo.logo + '-logo.png, ./assets/params/images/logo/' + appInfo.logo + '-logo@2x.png 2x'"
        width="25"
        height="25"
        [alt]="appInfo.name + ' Logo'"
      >
      <span class="nga-logo mx-1" [attr.aria-label]="appInfo.name">{{ appInfo.name }}</span>
    </a>
    <button 
      class="navbar-toggler" 
      type="button" 
      data-bs-toggle="collapse" 
      data-bs-target="#navbarCollapse"
      aria-controls="navbarCollapse" 
      aria-expanded="false" 
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link nga-nav-link" routerLink="/">
            <i class="fab fa-angular me-1"></i>Features
          </a>
        </li>
      </ul>
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link nga-nav-link" routerLink="/about">
            <i class="far fa-question-circle me-1"></i>About
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link nga-nav-link" routerLink="/contact">
            <i class="fas fa-envelope me-1"></i>Contact
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link nga-nav-link" [href]="'https://github.com/' + appInfo.network">
            <i class="fab fa-github me-1"></i>Github
          </a>
        </li>
      </ul>
      <form class="d-flex">
        <button 
          type="button" 
          class="btn btn-sm nga-btn-navbar me-2" 
          routerLink="/signup"
        >
          <i class="fas fa-user-plus me-2"></i>Sign up
        </button>
        <button 
          type="button" 
          class="btn btn-sm btn-outline-light me-2" 
          routerLink="/login"
        >
          <i class="fas fa-sign-in-alt me-2"></i>Login
        </button>
      </form>
    </div>
  </nav>
</header>
